<template>
  <div class="content-body" :style="borderStyle">
    <div
      v-if="
        setting.query !== undefined &&
          setting.query !== null &&
          setting.query.length > 0
      "
      class="query-custom"
    >
      <el-form
        ref="form"
        :model="form"
        :inline="true"
        size="small"
        label-width="120px"
      >
        <el-form-item
          v-for="(item, index) in setting.query"
          :key="'query-' + index"
          :label="item.label"
          :prop="item.column"
          style="margin-top: 10px;margin-bottom: 10px;"
        >
          <el-input
            v-if="item.type === 1"
            v-model="form[item.column]"
            clearable
            :placeholder="item.label"
          />
          <el-date-picker
            v-if="item.type === 2"
            v-model="form[item.column]"
            format="yyyy/MM/dd"
            value-format="yyyy/MM/dd"
            type="date"
            :placeholder="item.label"
            clearable
          />
          <el-time-select
            v-if="item.type === 3"
            v-model="form[item.column]"
            :picker-options="{ start: '00:00', step: '00:15', end: '24:00' }"
            :placeholder="item.label"
            clearable
          />
          <el-date-picker
            v-if="item.type === 4"
            v-model="form[item.column]"
            format="yyyy/MM/dd"
            value-format="yyyyMMdd"
            type="daterange"
            clearable
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
          <el-date-picker
            v-if="item.type === 5"
            v-model="form[item.column]"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
            format="yyyy/MM/dd HH:mm:ss"
            value-format="yyyyMMddHHmmss"
            clearable
          />
        </el-form-item>
        <el-form-item
          v-for="(item, index) in setting.query"
          :key="'query-' + index"
          :label="item.label"
          :prop="item.column"
          style="margin-top: 10px;margin-bottom: 10px;"
        >
          <el-input
            v-if="item.type === 1"
            v-model="form[item.column]"
            clearable
            :placeholder="item.label"
          />
          <el-date-picker
            v-if="item.type === 2"
            v-model="form[item.column]"
            format="yyyy/MM/dd"
            type="date"
            :placeholder="item.label"
            clearable
          />
          <el-time-select
            v-if="item.type === 3"
            v-model="form[item.column]"
            :picker-options="{ start: '00:00', step: '00:15', end: '24:00' }"
            :placeholder="item.label"
            clearable
          />
          <el-date-picker
            v-if="item.type === 4"
            v-model="form[item.column]"
            format="yyyy/MM/dd"
            type="daterange"
            clearable
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
          <el-date-picker
            v-if="item.type === 5"
            v-model="form[item.column]"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
            format="yyyy/MM/dd HH:mm:ss"
            clearable
          />
        </el-form-item>
        <el-form-item style="margin-top: 10px;margin-bottom: 10px;">
          <el-button
            type="primary"
            size="small"
            icon="el-icon-search"
            @click="queryEntity"
          >查询1</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="article-body">
      <el-empty
        v-if="dataList === null || dataList.length === 0"
        :image-size="100"
      />
      <div v-else>
        <div
          v-for="(obj, index) in dataList"
          :key="'obj-' + index"
          class="custom-ul-li"
          :style="active === index ? activeStyle : ''"
          @mouseenter="openAlert(index)"
          @mouseleave="closeAlert(index)"
          @click="openEntity(obj)"
        >
          <div class="custom-ul-time">
            <div class="time-content">
              <div
                class="time-icon"
                style="color: #ffffff;background-color: #00a0e9"
              >
                {{ obj[column["time"]].substring(8, 10) }}
              </div>
              <div class="time-icon" style="color: #999999">
                {{ obj[column["time"]].substring(5, 7) }}月
              </div>
            </div>
          </div>
          <div class="custom-ul-title">
            <div class="custom-li-line">
              {{ obj[column["title"]] }}
            </div>
            <div class="custom-li-line">
              <div class="li-line">
                <i class="el-icon-time custom-time">{{
                  obj[column["time"]].substring(11, 16)
                }}</i>/{{ obj[column["left"]] }}
              </div>
              <div class="li-line" style="text-align: right">
                {{ obj[column["right"]] }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="query-pager">
      <el-pagination
        :current-page="form.page"
        :page-size="form.size"
        :total="pagerSize"
        style="margin-top: 8px;"
        layout="total, prev, pager, next, sizes"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </div>
  </div>
</template>
<script>
import { more, openEntity } from '@/mixins/template';
export default {
  name: 'PcMoreNewListTempV2',
  mixins: [more, openEntity],
  props: {
    temp: {
      type: Object,
      default: () => {
        return {};
      }
    },
    layout: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  computed: {
    borderStyle() {
      if (this.temp.sfxsbk === true) {
        return {
          backgroundColor: this.customStyle.mrzt,
          opacity: this.customStyle.tmd,
          color: this.customStyle.fontColor
        };
      }
      if (this.temp.bkyy === true) {
        return {
          backgroundColor: this.customStyle.mrzt,
          opacity: this.customStyle.tmd,
          color: this.customStyle.fontColor
        };
      }
      return {
        backgroundColor: this.customStyle.mrzt,
        opacity: this.customStyle.tmd,
        color: this.customStyle.fontColor
      };
    }
  },
  watch: {
    layout: {
      handler(newData, oldData) {
        this.customStyle = newData;
        this.titleStyle = {
          backgroundColor: newData.mrlb,
          opacity: newData.tmd
        };
        this.activeStyle = {
          color: newData.xsys,
          backgroundColor: newData.xzbjs
        };
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    },
    temp: {
      handler(newName, oldName) {
        // 值发生变化时
        if (undefined !== newName && newName !== null) {
          this.setting = JSON.parse(newName.pzx);
          this.column = this.setting;
          this.form.cid = newName.id;
          this.initData(newName.id);
        }
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    }
  }
};
</script>

<style scoped>
.content-body {
  width: 100%;
  height: 100%;
  padding: 0px 15px;
  box-sizing: border-box;
  display: flex;
  flex-flow: column nowrap;
}
.query-custom,
.query-pager {
  flex: 0 1 auto;
  min-height: 50px;
  border-bottom: 1px solid #dcdfe6;
}
.query-pager {
  height: 40px;
}
.article-body {
  flex: 1 1 auto;
  overflow: hidden;
  height: inherit;
}
.custom-ul-li {
  width: 100%;
  height: 60px;
  display: flex;
  flex-flow: row nowrap;
  border-bottom: 1px solid #ebeef5;
  cursor: pointer;
}
.custom-ul-time {
  height: 60px;
  width: 70px;
  flex: 0 1 auto;
  padding: 5px 10px;
  box-sizing: border-box;
  line-height: 60px;
  text-align: center;
}
.custom-ul-title {
  height: 60px;
  flex: 1 1 auto;
}
.time-content {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  border: 1px solid #409eff;
  overflow: hidden;
}
.time-icon {
  height: 25px;
  line-height: 25px;
  font-size: 16px;
  font-weight: 600;
}
.custom-li-line {
  width: 100%;
  height: 30px;
  line-height: 30px;
  display: flex;
  flex-flow: row nowrap;
  font-size: 16px;
}
.li-line {
  height: 30px;
  text-align: left;
  flex: 0 1 auto;
  width: 50%;
  font-size: 12px;
  text-align: left;
  color: #909399;
}
.custom-time {
  line-height: 30px;
  font-size: 12px;
  color: #909399;
}
[class*="el-col-"] {
  float: left;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
